<template>
  <div>
    <a-tag
      v-for="(tag, index) in tagStore.tags"
      :key="tag.path"
      :class="{ active: tagStore.activeIndex === index }"
      :closable="tag.path != '/home' ? true : false"
      :bordered="false"
      @click="tagStore.setActive(index)"
      @close="tagStore.removeTag(index)"
    >
      {{ tag.title }}
    </a-tag>
  </div>
</template>

<script lang="ts" setup>
import { useTagStore } from '@/store/modules/tags';
import { useRoute } from 'vue-router';
import { watch } from 'vue';

const tagStore = useTagStore();
const route = useRoute();

// 监听路由变化自动添加标签
watch(route, (newRoute) => {
  if (newRoute.meta.title && newRoute.path !== '/') {
    tagStore.addTag({
      title: newRoute.meta.title as string,
      path: newRoute.path,
    });
  }
});
</script>
<style lang="scss" scoped>
div {
  height: 35px;
  line-height: 35px;

  .ant-tag {
    background-color: #fff;
    width: 100px;
    font-size: 14px;
    text-align: center;
    padding: 5px 0;
    border-radius: 0;
    cursor: pointer;
  }

  a-tag {
    cursor: pointer;
  }
}

.active {
  color: rgb(101, 109, 227);
  border-bottom: 2px solid #1890ff;
}
</style>
